<script lang="ts" setup>
import { computed } from 'vue';

const props = withDefaults(defineProps<{
    direction?: string,
    size?: number | string,
    align?: string,
    fill?: boolean
}>(), {
    direction: 'horizontal',
    fill: false
})

function getSize(value: any) {
    return typeof value === 'number' ? `${value}px` : value;
}

const styles = computed<any>(() => {
    let align: string = ""
    if (!props.fill) {
        align = props.align || "start"
    }
    const newStyles: any = {
        flexDirection: props.direction === 'vertical' ? 'column' : 'row',
        gap: props.direction !== undefined ? getSize(props.size) : null,
    }
    if (props.direction === 'horizontal' && align !== "") {
        let alignItemMap: any = {
            "start": "flex-start",
            "center": "center",
            "end": "flex-end",
        }
        newStyles.alignItems = alignItemMap[align];
    } else if (props.direction === 'vertical' && align !== "") {
        let justifyContentMap: any = {
            "start": "flex-start",
            "center": "center",
            "end": "flex-end",
            "between": "space-between",
        }
        newStyles.alignItems = justifyContentMap[align];
    }
    return newStyles;
})
</script>

<template>
    <div class="umrp-space" :style="styles">
        <slot></slot>
    </div>
</template>

<style lang="scss" scoped>
.umrp-space {
    display: flex;
}
</style>